<template>
  <div id="itemBank">
    <div class="change">
      <header>
        <span>第{{questionBank[flag].id}}题</span>
        <span class="headType">{{questionBank[flag].type}}</span>
      </header>
      <section>
        <div class="content" v-html="questionBank[flag].question"></div>
      </section>
      <div class="section">请填写答案</div>
      <div class="key" v-if="questionBank[flag].type==='单选'">
        <span
          v-for="(item) in questionBank[flag].option.单选"
          :key="item.id"
          :class="{'active':color==item}"
          @click="handleColor(item)"
        >{{item}}</span>
      </div>
      <div class="key" v-if="questionBank[flag].type==='多选'">
        <span
          v-for="(item,index) in questionBank[flag].option.多选"
          :key="item.id"
          :class="{'active':color1.some(val=>val===questionBank[flag].option.多选[index])}"
          @click="handleColor1(index)"
        >{{item}}</span>
      </div>
      <div class="key" v-if="questionBank[flag].type==='填空'" style="padding:10px 0;display:flex;flex-direction: column;">
        <div
          class="tiankong"
          style="display:flex;align-items:center;margin:5px 0;"
          v-for="(item,index) in questionBank[flag].option.填空.length"
          :key="index"
        >
          <h6 style="margin-bottom: 0" >{{index+1}}.</h6>
          <input type="text" placeholder="请输入答案" v-model="input[index]" class="text" />
        </div>
      </div>
      <div class="key" v-if="questionBank[flag].type==='解答'">
        <span v-if="questionBank[flag].type==='解答'">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
        </span>
      </div>
      <footer>
        <span :class="{'disappear':flag==0}" @click="handleBack(data)">上一题</span>
        <span v-text="this.questionBank.length !== flag+1?'下一题': '提交答案'" @click="handleNext(data)"></span>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      questionBank: [],
      color: "",
      color1: [],
      input: [],
      textarea: "",
      key: [],
      reduce: 0
    };
  },
  props: ["question", "daan", "handleNext", "handleBack", "flag"],
  computed: {
    data() {
      const { type } = this.question;
      if (type === "单选") {
        return { id: this.flag + 1, key: this.color };
      } else if (type === "多选") {
        return { id: this.flag + 1, key: this.color1 };
      } else if (type == "填空") {
        return { id: this.flag + 1, key: this.input };
      }
      return { id: this.flag + 1, key: this.textarea };
    }
  },
  watch: {
    $route() {
      this.start();
    }
  },
  methods: {
    start() {
      this.color = "";
      this.color1 = [];
      this.input = [];
      this.textarea = "";
      const { daan = {} } = this;
      const { type } = this.question;
      if (type === "单选") {
        this.color = daan.key;
      } else if (type === "多选") {
        this.color1 = daan.key || [];
      } else if (type == "填空") {
        this.input = daan.key || [];
      } else {
        this.textarea = daan.key;
      }
    },
    //单选-----答案
    handleColor(index) {
      this.color = index;
    },
    //多选-----答案
    handleColor1(index) {
      var arr = [this.question.option.多选[index]];
      if (this.color1.length === 0) {
        this.color1.push(this.question.option.多选[index]);
      } else {
        if (!this.color1.includes(arr[0])) {
          this.color1.push(this.question.option.多选[index]);
        } else {
          for (var i = 0; i < this.color1.length; i++) {
            if (this.color1[i] == arr[0]) {
              this.color1.splice(i, 1);
              break;
            }
          }
        }
      }
    }
  },
  created() {
    this.questionBank = JSON.parse(localStorage.getItem("questionBank"));
  }
};
</script>
<style scoped>
.active {
  background-color: #4086f2 !important;
  color: #fff;
}
.disappear {
  background-color: #edf4fd !important;
}
header {
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #eaeaea;
}
.headType {
  width: 65px;
  height: 25px;
  border: 1px solid #bfd9fb;
  background-color: #edf4fd;
  text-align: center;
  line-height: 25px;
  color: #69a5f8;
  font-size: 14px;
  border-radius: 4px;
}
section{
  overflow-y:auto ;
}
.content {
  min-height: 360px;
  padding: 10px;
}
.section {
  padding-left: 16px;
  height: 30px;
  border-bottom: 1px solid #eaeaea;
}
.key {
  min-height: 70px;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
}
.key span {
  height: 25px;
  width: 25px;
  background-color: #f7f7f7;
  font-size: 12px;
  font-weight: bold;
  display: block;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
}
footer {
  display: flex;
  height: 70px;
  align-items: center;
  justify-content: space-around;
  padding: 0 20px;
}
footer span {
  width: 125px;
  height: 45px;
  display: block;
  color: #fff;
  background-color: #4086f2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
}
.text {
  width: 200px;
  height: 30px;
  border-radius: 10px;
  outline: none;
  border: 1px solid #eaeaea;
  padding-left: 3px;
  margin-left: 6px;
}
</style>